<!-- 首页，支持店铺装修 -->
<script setup lang="ts">
  import { computed, ref } from 'vue';
  import { onLoad, onPageScroll, onPullDownRefresh } from '@dcloudio/uni-app';
  const enableFlex = ref(true)
  const isTriggered = ref(false)
  const isLoading = ref(false)
  const onRefresherRefresh = async () => {
  	console.log('onRefresherRefresh')
  	isTriggered.value = true
  
  	// guessRef.value?.resetData()
  	// isLoading.value = true
  	// await Promise.all([
  	//   getHomeBannerData(),
  	//   getHomeCategoryData(),
  	//   getHomeHotData(),
  	//   guessRef.value.getGuessMore(),
  	// ])
  	isLoading.value = false
  	isTriggered.value = false
  	// guessRef.value.getGuessMore()
  }
  const onScrollToLower = () => {
  	console.log('滚动到底了')
  	// if (!isLoading.value) {
  	// guessRef.value.getGuessMore()
  }
  import sheep from '@/sheep';
  import $share from '@/sheep/platform/share';
  // 隐藏原生tabBar
  // uni.hideTabBar({
  //   fail: () => {},
  // });
  // const showTabbar = ref(false)
  // const template = computed(() => sheep.$store('app').template?.home);
  // console.log(template.value.page)
  // console.log(template.value.navigationBar)
  // 在此处拦截改变一下首页轮播图 此处先写死后期复活 放到启动函数里
  // (async function() {
  // console.log('原代码首页定制化数据',template)
  // let {
  // 	data
  // } = await index2Api.decorate();
  // console.log('首页导航配置化过高无法兼容',JSON.parse(data[1].value))
  // 改变首页底部数据 但是没有通过数组id获取商品数据接口
  // let {
  // 	data: datas
  // } = await index2Api.spids();
  // template.value.data[9].data.goodsIds = datas.list.map(item => item.id);
  // template.value.data[0].data.list = JSON.parse(data[0].value).map(item => {
  // 	return {
  // 		src: item.picUrl,
  // 		url: item.url,
  // 		title: item.name,
  // 		type: "image"
  // 	}
  // })
  // }())
  import { useChooseWeather, useSwiperIndex, usePantTabChoose, useWeatherIndex } from '@/simba/hooks'
  import { usePlantListWater, usePlantListFertilize } from '@/simba/hooks/plant';
  
	//轮播图
	const { bannerList, onGetSwiperBannerData } = useSwiperIndex()
	// import SimbaTabs from '@/pages/components/SimbaTabs/SimbaTabs.vue';
	import type { siTabsInstance } from '@/simba/types/component.d';
	//当日天气建议与传感器数据检测
	const { weatherTabs } = useChooseWeather()
	const weatherTabRef = ref<siTabsInstance>();//
	
	import user from "@/sheep/store/user";
	const profile = user()
	// console.log("index-userInfo：" + profile.getToken())
	// 导入天气建议
	// import SimbaWeather from './components/SimbaWeather/SimbaWeather.vue';
	const { currentDate, onGetWeatherData } = useWeatherIndex()
	
	//植物操作（）
	const { plantTabs, plantTabRef, onAddPlantHandler } = usePantTabChoose()
	import type { IPlantItem } from '../../simba/types';
	
	const { 
		listPlantWater, onGetPlantListWater,
		onBatchWaterHandler, onWaterTodayHandler, onWaterTomorrowHandler
	 } = usePlantListWater()
	const { listPlantFertilize, onGetPlantListFertilize,
		onBatchFertilizeHandler, onFertilizeTodayHandler, onFertilizeTomorrowHandler
	} = usePlantListFertilize()
	
	const toSettingPage =() =>{
		console.log("toSettingPage")
		uni.redirectTo({
			url:'/pages/detection/manualEntry/manualEntry'
		})
	}
	const toDetection = () => {
		console.log("toDetection");
		uni.switchTab({
			url:'/pages/detection/detection'
		})
		// uni.redirectTo({
		// 	url:'/pages/deviceList/deviceList'
		// })
	}
		
	onLoad((options) => {
		onGetSwiperBannerData()
		onGetWeatherData()
		onGetPlantListWater()
		onGetPlantListFertilize()

    // #ifdef MP
    // 小程序识别二维码
    if (options.scene) {
      const sceneParams = decodeURIComponent(options.scene).split('=');
      console.log('sceneParams=>', sceneParams);
      options[sceneParams[0]] = sceneParams[1];
    }
    // #endif

    // 预览模板
    if (options.templateId) {
      sheep.$store('app').init(options.templateId);
    }

    // 解析分享信息
    if (options.spm) {
      $share.decryptSpm(options.spm);
    }

    // 进入指定页面(完整页面路径)
    if (options.page) {
      sheep.$router.go(decodeURIComponent(options.page));
    }
  });

  // 下拉刷新
  onPullDownRefresh(() => {
    sheep.$store('app').init();
    setTimeout(function () {
      uni.stopPullDownRefresh();
    }, 800);
  });

  onPageScroll(() => {});
</script>

<template>
	<siNavigatorBar></siNavigatorBar>
	<scroll-view
		scroll-y
		:enable-flex="enableFlex"
		class="viewport"
		:refresher-enabled="true"
		:refresher-triggered="isTriggered"
		@refresherrefresh="onRefresherRefresh"
		@scrolltolower="onScrollToLower"
		>
	<siSwiper :list="bannerList" :isAutoplay="true" :isCircular="true"/>
	<view class="content">
		<view class="tabs">
			<siTabs  ref="weatherTabRef"
				:list="weatherTabs .list" 
				:choosedTab="weatherTabs.choosedTab"
				>
				<template #content>
					<view class="level-icon">
						<image class="ic-size" :src='profile.userInfo.level.icon'></image>
						<span>{{profile.userInfo.level.name}}</span>
					</view>
					
				</template>
			</siTabs>
		</view>
		<view class="weather-container">
			<view class="weather-item" v-if="weatherTabRef?.choosedTab.name === '天气提醒'">
				<siWeather :currentDate="currentDate" />
			</view>
			<view class="cweather-item" v-else-if="weatherTabRef?.choosedTab.name === '土壤监测'">
				<view style="width: 90%; height: 100rpx; display: flex; align-items: center; justify-content:space-between; background-color: white; padding:0 10rpx; margin: 10rpx;">
					<up-icon name="setting" size="26px" @click="toSettingPage"></up-icon>
				</view>
				<up-button style="margin-top: 20rpx;" type="primary" :plain="true" :hairline="true" size="" text="去检测" @click="toDetection"></up-button>
				<up-button style="margin-top: 20rpx;" type="primary" :plain="true" :hairline="true" size="" text="进入花园" @click="toDetection"></up-button>
				<up-button style="margin-top: 20rpx;" type="primary" :plain="true" :hairline="true" size="" text="装饰花园" @click="toDetection"></up-button>
			</view>
			<view v-else>选择异常</view>
		</view>
		
		<view class="tabs">
			<siTabs class="tabs" ref="plantTabRef" 
				:list="plantTabs.list" 
				:choosedTab="plantTabs.choosedTab">
				<template #content>
					<u-button type="primary" size="mini" icon="plus" :plain="true" @click="onAddPlantHandler">添加植物</u-button>
				</template>
			</siTabs>
		</view>
		
		<view class="plant-container">
			<view class="plant-item" v-if="plantTabRef?.choosedTab.name ==='浇水'">
				<!-- <siPlantListIndex> class="plant-list" :list="listPlantWater" >
					<template #BatchOp>
						<u-button type="error" size="mini" :plain="true" @click="onBatchWaterHandler">批量浇水</u-button>
					</template>
					<template #ItemOpOne="{obj}">
						<u-button type="primary"  size="mini" :plain="true" text="浇水" @click="onWaterTodayHandler(obj as IPlantItem)"></u-button>
					</template>
					<template #ItemOpTwo="{obj}">
						<u-button type="primary"  size="mini" :plain="true" text="明天" @click="onWaterTomorrowHandler(obj)"></u-button>
					</template>
				</siPlantListIndex> -->
				<siPlantListIndex class="plant-list" :list="listPlantWater" >
					<template #BatchOp>
						<u-button type="error" size="mini" :plain="true" @click="onBatchWaterHandler">批量浇水</u-button>
					</template>
					<template #ItemOpOne="{obj}">
						<u-button type="primary"  size="mini" :plain="true" text="浇水" @click="onWaterTodayHandler(obj)"></u-button>
					</template>
					<template #ItemOpTwo="{obj}">
						<u-button type="primary"  size="mini" :plain="true" text="明天" @click="onWaterTomorrowHandler(obj)"></u-button>
					</template>
				</siPlantListIndex>
			</view>

			<view class="plant-item" v-else-if="plantTabRef?.choosedTab.name ==='施肥'">
				<siPlantListIndex class="plant-list" :list="listPlantFertilize" >
					<template #BatchOp>
						<u-button type="error" size="mini" :plain="true" @click="onBatchFertilizeHandler">批量施肥</u-button>
					</template>
					<template #ItemOpOne="{obj}">
						<u-button type="primary"  size="mini" :plain="true" text="施肥" @click="onFertilizeTodayHandler(obj)"></u-button>
					</template>
					<template #ItemOpTwo="{obj}">
						<u-button type="primary"  size="mini" :plain="true" text="明天" @click="onFertilizeTomorrowHandler(obj)"></u-button>
					</template>
				</siPlantListIndex>
			</view>
			<view v-else>选择异常2</view>
		</view>
	</view>
	<!-- <si-weather /> -->
  <!-- <view v-if="template">-->
    <!-- <s-layout
      title="首页"
      navbar="custom"
      tabbar="/pages/index/index"
	  :showTabbar="false"
      :bgStyle="template.page"
      :navbarStyle="template.navigationBar"
      onShareAppMessage
    > -->
	
      <!-- <s-block
        v-for="(item, index) in template.components"
        :key="index"
        :styles="item.property.style"
      >
        <s-block-item :type="item.id" :data="item.property" :styles="item.property.style" />
      </s-block> -->
    <!-- </s-layout> -->
  <!-- </view> -->
  </scroll-view>
</template>

<style lang="scss" scoped>
	.tabs{
		margin-top: 10rpx;
		.level-icon{
			display: flex;
			flex-direction: row;
			align-items: center;
			.ic-size{
				width: 36rpx; 
				height: 36rpx
			}
		}
	}
	.viewport{
		width: auto;
		// margin: 10rpx;
		.content{
			// width: auto;
			margin: 0rpx 8rpx 0 8rpx;
			.tab-choose{
				background-color: #ffffff;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
			}
			.weather-container{
				height: 200rpx; 
				// width: 100%;
				background-color: #ffffff;
				margin-top: 5rpx;
				display: flex; 
				align-items: center;
				// border: 1rpx red solid;
				.weather-item{
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					align-items: center;
					width: 100%;
					height:100%;
					// border: 1rpx red solid;
				}
				.cweather-item{
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					align-items: center;
				}
			}
			.plant-container{
				height: auto;
				// width: 100%;
				background-color: #ffffff;
				margin-top: 5rpx;
				display: flex; 
				align-items: center;
				// border: 1rpx red solid;
				.plant-item{
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					align-items: center;
					width: 100%;
					// border: 1rpx blue solid;
					.plant-list{
						width: 100%;
					}
				}
			}
		}
		// .content {
		// 	position: absolute;
		// 	top: 0;
		// 	left: 0;
		// 	right: 0;
		// 	bottom: 0;
		// 	transform: translateZ(1);
		
		// 	display: flex;
		// 	flex-direction: column;
		// 	align-items: center;
		// 	justify-content: center;
			
		// 	background-color : rgb(245, 245, 245);
		// 	// border: 1px red solid;
		// }
	}
</style>
